<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <!--子组件传值到父组件的案例-->
  <body>
    <div id="app">
      <!--子组件 定义事件 add_event 父组件 使用v-on:add_event="getaddresult" 表示监听该事件 并执行getaddresult方法-->
      <test
        :a="result"
        :b="19"
        :clicksize="clicksize"
        @add_event="getaddresult"
      ></test>
      <h3>{{result}}</h3>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      Vue.component("test", {
        props: ["a", "b", "clicksize"],
        template:
          '<div><button @click="add">点击到10000你就赢</button><p>累计点击次数{{clicksize}}</p></div>',
        methods: {
          add: function () {
            var value = 0;
            value = this.a + this.b;
            if (value > 10000) {
              alert("恭喜您赢得比赛累计点击了" + this.clicksize + "次");
            }
            this.$emit("add_event", {
              result: value,
            });
          },
        },
      });

      var myapp = new Vue({
        el: "#app",
        data: {
          result: 0,
          clicksize: 0,
        },
        methods: {
          getaddresult: function (evntdata) {
            if (Math.ceil(Math.random() * 100) > 50) {
              this.result = evntdata.result - Math.ceil(Math.random() * 100);
            } else {
              this.result = evntdata.result + Math.ceil(Math.random() * 100);
            }
            this.clicksize++;
            console.log(this.result);
          },
        },
      });
    </script>
  </body>
</html>
